<template>
    <video v-if="m3u8.url" :src="m3u8.url" controls autoplay></video>
    <h1 v-else style="color: red;font-size: 48px">视频已经下架</h1>
</template>
<script>
    import {api} from '@/tools/api'
    export default {
        name: 'episode',
        data () {
            return {
                m3u8: {},
            }
        },
        created(){
            this.fetchData()

        },
        methods:{
            fetchData(){
                let that = this
                let episodeId = this.$route.params.episodeId
                api.get('/rrv/m3u8/'+episodeId )
                    .then(function (response) {
                        that.m3u8 = response.data.data.m3u8
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        watch:{
            '$route.params.episodeId':'fetchData',

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .video {
        position: relative;
        display: block;
        width: 100%;
        padding-top: 56.25%;
        padding: 0;
        overflow: hidden;
    }
</style>
